
<template>
  <div class="Page_KnowledgeStyleBox">
    <div class="Page_KnowledgeStyleLeftBox">
      <PageHomeFromRouer></PageHomeFromRouer>
    </div>
    <div class="Page_KnowledgeStyleRightBox">
      <div class="Page_KnowledgeStyleHeadTitleBox">
        <PageHeadRigthFrom></PageHeadRigthFrom>
      </div>
      <div class="Page_KnowledgeStyleDread">
        <a-breadcrumb style="margintop: 10px; marginleft: 20px">
          <a-breadcrumb-item><a href="/home">工作台</a></a-breadcrumb-item>
          <a-breadcrumb-item
            ><a href="/knowledge">知识小册</a></a-breadcrumb-item
          >
        </a-breadcrumb>
      </div>
      <div class="Page_KnowLedgeStyleRgba">
        <div class="Page_KnowlEDGEStyleFrom">
          <p>
            名称：<input
              type="text"
              v-model="val"
              @input="search"
              placeholder="请输入知识库名称"
            />
          </p>
          <p>
            状态：<select style="width: 170px; height: 30px" name="" id="">
              <option value="">已发布</option>
              <option value="">草稿</option>
            </select>
          </p>
          <p></p>
          <p>
            <a-button type="primary">搜索</a-button>
            &nbsp;
            <a-button>重置</a-button>
          </p>
        </div>
        <div class="Page_KnowLedgeStyImg">
          <div class="Page_KnowLedgeStyHeader">
            <p></p>
            <p><DrawerStyleBox></DrawerStyleBox></p>
          </div>
          <div class="Page_KnowLedGetStyleBox">
            <div class="Page_KnowLedGetStyleBody">
              <dl v-for="(item, idx) in kNOWlEDGEarray" :key="idx">
                <dt>
                  <p class="Page_kNOWlEDgETstyleIMGx">
                    <img :src="item.img" alt="" />
                  </p>
                  <p style="margin: 10px">{{ item.name }}</p>
                </dt>
                <dd>
                  <p>
                    <router-link style="color: #000" to="/editor"
                      ><edit-outlined
                    /></router-link>
                  </p>
                  <p>
                    <a-button style="border: none" @click="warning"
                      ><cloud-upload-outlined
                    /></a-button>
                  </p>
                  <p><ComFromListS></ComFromListS></p>
                  <p id="IconDel">
                    <a-popconfirm
                      title="Are you sure delete this task?"
                      ok-text="Yes"
                      cancel-text="No"
                      @confirm="confirm"
                      @cancel="cancel"
                    >
                      <delete-outlined />
                    </a-popconfirm>
                  </p>
                </dd>
              </dl>
            </div>
            <div class="Page_KnowLedGetStyleFooter"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import Axios from "axios";
import { message } from "ant-design-vue";
import {
  EditOutlined,
  CloudUploadOutlined,
  SettingOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";
import ComFromListS from "../../components/ComFromListS/index.vue";
import DrawerStyleBox from "../../components/DrawerStyleBox/index.vue";
import PageHeadRigthFrom from "../../components/PageHeadRigthFrom";
import PageHomeFromRouer from "../../components/PageHomeFromRouer";
export default {
  data() {
    return {
      kNOWlEDGEarray: [],
      val: "",
    };
  },
  created() {
    this.KnowLeDeArrayFunc();
  },
  methods: {
    async KnowLeDeArrayFunc() {
      let res = await Axios.get("/api/getMock");
      this.kNOWlEDGEarray = res.data.data;
    },
    AddRgba() {
      //设置
    },
    warning() {
      message.warning("访客无权进行该操作");
    },
    confirm() {
      message.warning("访客无权进行该操作");
    },
    cancel() {
      message.error("Click on No");
    },
    async search() {
      let res = await Axios.post("/api/inputSet", { val: this.val });
      this.kNOWlEDGEarray = res.data.list;
    },
  },
  components: {
    PageHomeFromRouer,
    PageHeadRigthFrom,
    DrawerStyleBox,
    EditOutlined,
    CloudUploadOutlined,
    SettingOutlined,
    DeleteOutlined,
    ComFromListS,
  },
};
</script>

<style>
.Page_KnowledgeStyleBox {
  width: 100%;
  height: 100%;
  display: flex;
}
.Page_KnowledgeStyleLeftBox {
  width: 13%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background: #001529;
  border-right: 1px solid #ccc;
}
.Page_KnowledgeStyleRightBox {
  flex: 1;
}
.Page_KnowledgeStyleHeadTitleBox {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
.Page_KnowledgeStyleDread {
  width: 100%;
  height: 40px;
}
.Page_KnowLedgeStyleRgba {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #eff2f5;
}
#IconDel {
  border-right: none;
}
.Page_KnowlEDGEStyleFrom {
  width: 96%;
  height: 150px;
  margin: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fff;
}
.Page_KnowLedgeStyImg {
  width: 96%;
  height: auto;
  background: #fff;
  margin: 30px;
}
.Page_KnowLedGetStyleBox {
  width: 96%;
  height: 500px;
  background: #fff;
}
.Page_KnowLedGetStyleBody {
  width: 100%;
  height: 449px;
  display: flex;
  flex-wrap: wrap;
}
.Page_KnowLedGetStyleBody > dl {
  width: 400px;
  height: 200px;
  flex-shrink: 0;
  margin-left: 40px;
  border: 1px solid #ccc;
}
.Page_KnowLedGetStyleBody > dl > dd {
  width: 100%;
  height: 50px;
  display: flex;
  border-top: 1px solid #ccc;
}
.Page_KnowLedGetStyleBody > dl > dd > p {
  width: 101px;
  height: 100%;
  text-align: center;
  line-height: 50px;
  border-right: 1px solid #ccc;
}
.Page_kNOWlEDgETstyleIMGx > img {
  width: 100%;
  height: 100px;
}
.Page_KnowLedgeStyHeader {
  width: 100%;
  height: 50px;
  display: flex;
  padding: 20px;
  align-items: center;
  justify-content: space-between;
}
</style>
